﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Slickflow Diagram</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="~/Content/jquery-ui/jquery-ui.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-3.3.7.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-theme-3.3.7.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-dialog.min.css" />
    <link rel="stylesheet" href="~/Content/bootstrap/bootstrap-progressbar-3.3.4.min.css" />

    <link rel="stylesheet" href="~/Content/graphCanvas.css" />

    <style type="text/css" media="screen">
        div.base {
            position: absolute;
            overflow: hidden;
            font-family: Arial;
            font-size: 8pt;
        }

            div.base#kgraphContainer {
                border-style: solid;
                border-color: #F2F2F2;
                border-width: 1px;
                background: url('Scripts/mxGraph/src/editor/images/grid.gif');
            }

        hr {
            border-top: 1px solid #000000 !important;
            margin-bottom: 5px !important;
            margin-top: 5px !important;
        }
    </style>

    <script type="text/javascript">
		mxBasePath = "Scripts/mxGraph/src";
    </script>


</head>
<body>
    <div id="kgraphContainer" style="overflow: scroll;" class="base">
        <!-- Graph Here -->
    </div>

    <!--Progress Bar-->
    <div class="modal js-loading-bar">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" data-transitiongoal="75"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- jquery -->
    <script type="text/javascript" src="~/Scripts/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery-ui-1.10.3.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.msgBox.js"></script>
    <script type="text/javascript" src="~/Scripts/later.min.js"></script>

    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-dialog.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-progressbar.min.js"></script>

    <!--helper-->
    <script type="text/javascript" src="~/Scripts/slick.event.js"></script>
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>
    <script type="text/javascript" src="~/Scripts/xmlhelper.js"></script>
    <script type="text/javascript" src="~/Scripts/vkbeautify.js"></script>
    <script type="text/javascript" src="~/Scripts/XMLWriter-1.0.0-min.js"></script>

    <script type="text/javascript" src="~/Scripts/mxGraph/src/mxClient.js"></script>

    <!-- Slickflow kgraph main files -->
    <script type="text/javascript" src="~/ViewJS/kresource.js"></script>
    <script type="text/javascript" src="~/ViewJS/mxfile.js"></script>
    <script type="text/javascript" src="~/ViewJS/kloader.js"></script>
    <script type="text/javascript" src="~/ViewJS/kmain.js"></script>
    <script type="text/javascript" src="~/ViewJS/kmodel.js"></script>
    <script type="text/javascript" src="~/ViewJS/mxtoolkit.js"></script>
    <script type="text/javascript" src="~/ViewJS/mxconfig.js"></script>
    <script type="text/javascript" src="~/ViewJS/activityproperty.js"></script>

    <script type="text/javascript">
        mxGraph.prototype.htmlLabels = true;
        mxGraph.prototype.allowLoops = true;

        mxGraph.prototype.isWrapping = function (cell) {
            return true;
        };

        mxConstants.DEFAULT_HOTSPOT = 1;

        // Enables guides
        mxGraphHandler.prototype.guidesEnabled = true;

        // Alt disables guides
        mxGuide.prototype.isEnabledForEvent = function (evt) {
            return !mxEvent.isAltDown(evt);
        };

        // Enables snapping waypoints to terminals
        mxEdgeHandler.prototype.snapToTerminals = true;

        window.onbeforeunload = function () { return mxResources.get('changesLost'); };
    </script>
    <script type="text/javascript">
        $(function () {
            kresource.localize();

            kmain.init();
            kmain.showDiagramReadOnly();

            //load process graph from application page
            loadProcessGraph();
        });

        //display application process graph
        //it's readonly for business process veiwer.
        function loadProcessGraph() {
            var appInstanceID = '@ViewBag.AppInstanceID';
            var processID = '@ViewBag.ProcessID';
            if (appInstanceID === '') {
                return;
            }

            var query = {
                ProcessGUID: '@ViewBag.ProcessGUID',
                Version: "1"
            };

            $('#loading-indicator2').show();

            //load process xml file
            jshelper.ajaxPost('api/Wf2Xml/QueryProcessFile',
                JSON.stringify(query),
                function (result) {
                    if (result.Status == 1) {
                        var graphData = kloader.load(result.Entity);

                        //render running nodes with red color
                        var taskQuery = {
                            "AppInstanceID": '@ViewBag.AppInstanceID',
                            "ProcessGUID": '@ViewBag.ProcessGUID'
                        };

                        jshelper.ajaxPost('api/Wf2Xml/QueryReadyActivityInstance',
                            JSON.stringify(taskQuery), function (result) {
                                if (result.Status == 1) {
                                    kmain.renderReadyTasks(result.Entity);

                                    $('#loading-indicator2').hide();
                                } else {
                                    $.msgBox({
                                        title: "Process / KGraph",
                                        content: kresource.getItem('processdiagramreaderrormsg') + result.Message,
                                        type: "error"
                                    });
                                }
                            });
                        jshelper.ajaxPost('api/Wf2Xml/QueryCompletedTransitionInstance',
                            JSON.stringify(taskQuery), function (result) {
                                if (result.Status === 1) {
                                    kmain.renderCompletedTransitions(result.Entity);
                                    $('#loading-indicator2').hide();
                                } else {
                                    $.msgBox({
                                        title: "Process / KGraph",
                                        content: kresource.getItem('processdiagramreaderrormsg') + result.Message,
                                        type: "error"
                                    });
                                }
                            });
                    } else {
                        $.msgBox({
                            title: "Process / KGraph",
                            content: kresource.getItem('processdiagramreaderrormsg') + result.Message,
                            type: "error"
                        });
                    }
                }
            );
        }
    </script>
</body>
</html>
